<template>
	<view class="content">
		 <view class="iconfont icon-fanhui5 white size60" @click="$back()"></view>
	
		<view class="rows ">
			<image :src="info.image" mode="widthFix" class="rows"></image>
		</view>
	
     <!-- 单品 -->
		<view class="type1" v-if="type == 1">
			<view class="msgBox">
				<view class="describe size32 white">{{info.name}}</view>
				
				
				<view class="describe color_e6e d-flex a-center">
					<view class="d-flex a-center m-right10">
						<view class="bgF1 bor_F1 color_33 h7  flexac p-left10 p-right10">限量</view>
						<view class="h7 bor_F1   d-flex a-center p-left10 p-right10 color_F1">{{info.stock}}份</view>
					</view>
					<view class="d-flex a-center m-right10" v-if="info.limit_buy != 0">
						<view class="bgF1 bor_F1 color_33 h7  flexac p-left10 p-right10">限购</view>
						<view class="h7 bor_F1   d-flex a-center p-left10 p-right10 color_F1">{{info.limit_buy}}份</view>
					</view>
					<view class="category_name  color_F1">{{info.goods_category_name}} </view>
					<view class="bor_F1 color_F1 h7  p-left10 p-right10">{{info.label}}</view>
				</view>
				
				
				<view class="row  a-center  m-top30">
					<view class="compla_log flexac bor_radius">
						<image :src="info.company_image" mode="aspectFit" ></image>
					</view>
					<view class="flex-1 m-left10">
						  <text class="h7 white">{{info.company_name}} </text>
					    <!--  <text class="color_F1 h7 m-left10">{{info.creator}}</text> -->
					</view>
				</view>
			</view>
			
			
			<view class="descBox" v-if="info.content">
				<view class="item size32">藏品介绍</view>
				<view class="desinfo" v-html="util.checkImg(info.content)"></view>
			</view>
			
			<view class="descBox">
				<view class="row bg38 padding30-20 bor_radius_10">
					<view class="item size32">藏品信息</view>
					<view class="row j-sb a-center m-top20 white size26">
						<text>创作者</text>
						<text>{{info.creator}}</text>
					</view>
					<view class="row j-sb a-center m-top20 white size26">
						<text>发行方</text>
						<text>{{info.owner}}</text>
					</view>
					<view class="row j-sb a-center m-top20 white size26">
						<text>发行时间</text>
						<text>{{info.start_time}}</text>
						
					</view>
					
				</view>
			</view>
		
			
			<view class="descBox " >
				<view class="row bg38 padding30-20 bor_radius_10">
				<view class="item size32">购买须知</view>
				<view class="size28 white m-top10 text-justify">
					数字藏品为虚拟数字商品，而非实物，仅限实名认证为年满18周岁的中国大陆用户购买。数字藏品的版权由发行方或原创者拥有，除另行取得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途。本商品一经售出，不支持退换。本商品源文件不支持本地下载。请勿对数字藏品进行炒作、场外交易、欺诈，或以任何其他非法方式进行使用。
				</view>
				</view>
			</view>
			<view class="footerBox flex_bt">
				<view class="price">¥{{info.price}}</view>
				<view class="subBtn " @tap="pay()" v-if="flag=='false'">立即购买</view>
				<view class="subBtn subnrn1"    v-else @click="toast1()">立即购买</view>
			</view>
		</view>

  <!-- 多品 -->
		<view class="type2" v-if="type == 2">
			<view class="msgBox">
				
				<view class="flex_bt">
					<view class=" size32 white">{{info.name}}</view>
				
					<view class="number">本期共{{info.goods_count}}款藏品</view>
				</view>		
				<view class="row  m-top30 a-center">
					<view class="compla_log flexac bor_radius">
						<image :src="info.company_image" mode="aspectFit" ></image>
					</view>
					<view class="flex-1 size28 white m-left20">{{info.company_name}}</view>
				</view>
				<view class="rule color_e6e" v-if="buy_content">
					<view class="rule1 size32 white">抢购预约规则:</view>
					<view class="m-top20" v-html="buy_content"></view>
				</view>
				
			
			
				
				<view class="rule color_e6e" v-if="info.content">
					<view class="rule1 size32 white">藏品描述:</view>
					<view class="m-top20" v-html="info.content"></view>
				</view>
				
			</view>
			<view class="goodsList">
				<view class="goodsItem p-re" 
				      v-for="(item, index) in goodsList" :key="index"
				      @click="toUrl(`goodsDetail?goodsId=${item.id}`)" >
					  
					  <view class="masks">
						 <view class="state" v-if="item.status == 1 &&  item.surplus > 0">{{item.end_time}} 结束</view>
						  <view class="state state1" v-if="item.status == 1 &&   (item.surplus < 0 || item.surplus == 0)">
						  	<image src="../../static/img/index/time.png" mode="" class="time"></image>
						  	已售罄
						  </view>
						 <view class="state" v-if="item.status == 2 ">{{item.start_time}} 开售</view>
						 <view class="state state1" v-if="item.status == 3 && (item.surplus < 0 || item.surplus == 0)">
						 	<image src="../../static/img/index/time.png" mode="" class="time"></image>
						 	已售罄
						 </view>
						 <view class="state state1" v-if="item.status == 3 && item.surplus > 0 ">
						 	<image src="../../static/img/index/time.png" mode="" class="time"></image>
						 	已结束
						 </view>
					  </view>
					  
					  
					<image class="goodsImg" :src="item.image" mode=""></image>
					<view v-if="item.stock == 0" class="mask flex_column">
						<image class="maskImg" src="../../static/img/index/no.png" mode=""></image>
					</view>
					<view class="goodsinfo">
						<view class="goodsName">{{item.name}}</view>
						<view class="flexBox">
							<view class="price">¥<text>{{item.price}}</text></view>
							<image v-if="item.coupon_id" class="coupon" src="../../static/img/index/coupon.png" mode="">
							</image>
							<view class="count">限量:{{item.stock}}件</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="footerBox flex_bt" >
				<view class="count">{{info.goods_count}}款藏品可购买</view>
				<view class="subBtn white" @tap="pay()">立即购买</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: '',
				banner: {},
				info: {},
				type: '', //单品 多品
				goodsList: [],
				buy_content: '',
				fullscreen:true,
				flag:'false',
				text:''
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId;
			this.flag = e.flag;
			this.text=e.text;
			this.getData();
			const that=this
			uni.$on('init', () => {
				this.getData();
			})
		},
		methods: {
			pay() {
				this.go('orderMakeSure?goodsId=' + this.goodsId);
			},
			toast1(){
				this.toast(this.text);
			},
			getData() {
				this.$http.get('goods/goodsDetail', {
					id: this.goodsId
				}).then(res => {
					if (res.code == 1) {
						this.banner = res.data.images;
						this.info = res.data;
						this.type = res.data.type;
						if (this.type == 2) {
							this.goodsList = res.data.goods;
							this.getConfig();
						}

					}
				})
			},
			getConfig() {
				this.$http.post('login/config').then(res => {
					if (res.code == 1) {
						this.buy_content = res.data.buy_content
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #23272C;
	}
</style>
<style lang="scss" scoped>
	
	.masks{
		position: absolute;
		top:10rpx;
		left: 10rpx;
		z-index:88;
	}
	.state {
		display: inline-block;
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		color: #fff;
		font-size: 22rpx;
		border-radius: 22rpx;
		background: linear-gradient(90deg, #00D18B 0%, #00D18B 100%);
	}
	
	.state1 {
		color: rgba(255, 255, 255, 0.6);
		background: #010004;
		border-radius: 22rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		max-width: 150rpx;
		box-sizing: border-box;
	
		.time {
			height: 26rpx;
			width: 26rpx;
			margin: auto 8rpx auto 0;
		}
	}
	.compla_log{
		width:32rpx;
		height:32rpx;
		overflow: hidden;
	}
	
	.icon-fanhui5{
		position: fixed;
		left:20rpx;
		top:30rpx;
		z-index: 100;
	}
	@keyframes myfirst {
		0% {
			transform: rotatey(0deg)
		}

		25% {
			transform: rotatey(90deg)
		}

		50% {
			transform: rotatey(180deg)
		}

		75% {
			transform: rotatey(270deg)
		}

		100% {
			transform: rotatey(360deg)
		}
	}

	
	.content {
		padding-bottom: 200rpx;

		.Box {
			width: 100%;
			height: 680rpx;
			padding-bottom: 50rpx;
			background: url(../../static/img/index/bj1.png) no-repeat left top;
			background-size: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			
			.videoBox{
				width: 630rpx;
				height: 473rpx;
				video{
					width: 100%;
					height: 100%;
				}
			}

			.rotateBox {
				width: 540rpx;
				height: 540rpx;
				animation: myfirst 50s linear 150ms 100;

				.image {
					width: 540rpx;
					height: 540rpx;
				}
			}
		}

		.Box1 {
			width: 100%;
			height: 360rpx;
			margin-top: -100rpx;
			padding-bottom: 30rpx;
			// background: url(../../static/img/index/bj2.png) no-repeat top center;
			background-size: 620rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;

			.img {
				width: 84rpx;
				height: 152rpx;
				margin: 0 15rpx;
			}

			.center {
				max-width: 500rpx;
				height: 152rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;

				.goodsName {
					color: #FFFFFF;
					font-size: 30rpx;
					text-align: center;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.LimitBox {
					// width: 200rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #4C464A;
					border-radius: 6rpx;
					font-size: 24rpx;
					text-align: center;

					.Limit {
						min-width: 60rpx;
						padding: 0 10rpx;
						border-radius: 6rpx;
						color: #010101;
						background-color: #F1E2BC;
					}

					.stock {
						min-width: 80rpx;
						padding: 0 10rpx;
						color: #F1E2BC;
					}
				}
			}
		}

		.banner {
			width: 100%;
			height: 500rpx;
			background-color: #23272C;

			.uni-swiper-wrapper {
				z-index: 10;
			}

			image {
				width: 100%;
				height: 500rpx;
			}
		}

		.msgBox {
			// background-color: #FFFFFF;
			background-color: #23272C;
			padding: 30rpx;

			.goodsName {
				// color: #333333;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.category_name {
				height: 42rpx;
				line-height: 42rpx;
				font-size: 22rpx;
				padding: 0 15rpx;
				background: #F1E2BC;
				color: #1E1817;
				margin-right: 10rpx;
			}

			.number {
				height: 40rpx;
				line-height: 40rpx;
				padding: 0 15rpx;
				border-radius: 20rpx;
				background-color: #FFDD9D;
				color: #8A683A;
				font-size: 20rpx;
				font-weight: 500;
			}

			.describe {
				// color: #777777;
				font-size: 26rpx;
				line-height: 38rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}

			.priceBox {
				// color: #AE3523;
				color: #FFFFFF;
			
				font-weight: 500;

				text {
					font-weight: 500;
					font-size: 36rpx;
					margin-left: 10rpx;
				}
			}

			.rule {
				// background: #F4F4F4;
				background: #383B3F;
				border-radius: 20rpx;
				padding: 20rpx;
				// color: #777777;
				font-size: 24rpx;
				line-height: 34rpx;
				margin-top: 20rpx;

				.rule1 {
					// color: #8A683A;
					margin-bottom: 10rpx;
				}
			}
		}

		.descBox {
			padding: 20rpx 30rpx;
			background-color: #23272C;
			color: #AAAAAA;

			.item {
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 10rpx;
			}
		}

		.type1 .goodsinfo {
			padding: 0 30rpx;
			// background-color: #FFFFFF;
			background-color: #23272C;
			margin: 20rpx 0;

			.iptBox {
				padding: 20rpx 0;

				.label {
					width: 20%;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.35);
				}

				.center {
					width: 72%;
					color: #AAAAAA;
					font-size: 24rpx;
					word-break: break-word;
					// line-height: 44rpx;
					display: flow-root;
					// position: relative;
					// display: f;
					padding-right: 44rpx;
				}

				.copy {
					width: 44rpx;
					height: 44rpx;
					display: inline-block;
					position: absolute;
					right: 30rpx;
					
				}
			}

			// .iptBox1 {
			// 	.center {
			// 		color: #333333;
			// 		font-weight: 500;
			// 	}
			// }
		}

		.footerBox {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			width: 100%;
			height: 120rpx;
			// background-color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.9);
			// box-shadow: 0rpx -4rpx 32rpx 0rpx rgba(180, 180, 180, 0.5);

			.price {
				// color: #AE3523;
				color: #FFFFFF;
				font-size: 40rpx;
				margin-left: 30rpx;
			}

			.count {
				color: #777777;
				font-size: 28rpx;
				margin-left: 30rpx;
			}

			.subBtn {
				width: 360rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
			
				font-weight: 500;
				// background: url(../../static/img/index/button.png) no-repeat;
				background: #00DB7D;
				border-radius: 44rpx;
				margin-right: 30rpx;
			}
			.subnrn1{
				background: #8c8c8c;
			}
		}

		.type2 .goodsList {
			// background-color: #FFFFFF;
			background-color: #23272C;
			padding: 0 28rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.goodsItem {
				width: 335rpx;
				margin-bottom: 20rpx;
				// background: #FFFFFF;
				background: #383B3F;
				border-radius: 12rpx;
				position: relative;

				.goodsImg {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx;
				}

				.mask {
					width: 100%;
					height: 300rpx;
					border-radius: 20rpx;
					background: rgba(0, 0, 0, 0.2);
					position: absolute;
					left: 0;
					top: 0;

					.maskImg {
						width: 170rpx;
						height: 170rpx;
					}
				}

				.goodsinfo {
					padding: 20rpx;

					.goodsName {
						font-size: 32rpx;
						font-weight: 500;
						// color: #333333;
						color: #FFFFFF;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						margin-bottom: 10rpx;
					}

					.coupon {
						width: 48rpx;
						height: 48rpx;
					}

					.price {
						// color: #AE3523;
						color: #FFFFFF;
						font-size: 26rpx;
						margin-right: 10rpx;

						text {
							font-size: 34rpx;
						}
					}

					.count {
						flex: 1;
						color: #777777;
						font-size: 24rpx;
						text-align: right;
					}
				}
			}
		}

	}
</style>
